<template>
  <div class="pallet-simulator">
    <PalletViewer ref="viewerRef" :activeTab="activeTab" :palletParams="palletParams" />
    <ControlPanel v-model:activeTab="activeTab" v-model:params="palletParams" @update="handleControlUpdate" />
  </div>
</template>




<script setup>
import { ref, reactive, watch, nextTick } from 'vue'
import PalletViewer from './PalletViewer.vue' 
import ControlPanel from './ControlPanel.vue' 

const activeTab = ref('two')
const viewerRef = ref(null)

// 使用深层响应式对象
const palletParams = reactive({
  customize: 0,
  boardLength: 100,
  beamLength: 100,
  panel_leg: 0,
  t_bottomlayer: 0,
  t_leglayout: 0,
  tf_boardwing: 0,
  f_structure: 'N',
  f_blockheight: 10,
  useCustomHeight: true
})

// 🔥 完全重写：简化的tab切换监听
// 🔥 修复：确保tab切换时参数正确重置
watch(activeTab, (newTab, oldTab) => {
  
  // 保留核心参数
  const preservedParams = {
    boardLength: palletParams.boardLength, 
    beamLength: palletParams.beamLength, 
    panel_leg: palletParams.panel_leg, 
    customize: palletParams.customize  
  }

  // 根据目标tab重置参数
  if (newTab === 'two') {
    Object.assign(palletParams, {
      ...preservedParams,
      t_leglayout: palletParams.customize ? 1 : 0,
      t_bottomlayer: 0,
      tf_boardwing: palletParams.customize ? palletParams.tf_boardwing : 0,
      f_structure: 'N',
      f_blockheight:  0,
      useCustomHeight: !!palletParams.customize,
    })
  } else {
    Object.assign(palletParams, {
      ...preservedParams,
      f_structure: palletParams.customize ? (palletParams.f_structure || 'A') : 'N',
      f_blockheight: palletParams.customize ? (palletParams.f_blockheight || 10) : 0,
      useCustomHeight: !!palletParams.customize,
      t_leglayout: 0,
      t_bottomlayer: 0,
      tf_boardwing: palletParams.customize ? palletParams.tf_boardwing : 0
    })
  }

  
  // 🔥 修复：确保参数变化后立即更新3D显示
  nextTick(() => {
    viewerRef.value?.updatePallet?.()
  })
}, { immediate: true })

// 🔥 修复：简化控制面板更新处理
const handleControlUpdate = (params) => {
  
  // 直接合并参数到响应式对象
  Object.assign(palletParams, params)
  // 立即触发3D更新
  nextTick(() => {
    viewerRef.value?.updatePallet?.()
  })
}

// 🔥 完全重写：移除所有复杂的监听器，只保留一个简单的深度监听作为后备
let updateTimeout = null
watch(palletParams, (newParams, oldParams) => {
  // 检查是否有实际变化
  const hasChanged = Object.keys(newParams).some(key => 
    newParams[key] !== oldParams[key]
  )
  
  if (!hasChanged) return
  

  
  if (updateTimeout) {
    clearTimeout(updateTimeout)
  }
  
  updateTimeout = setTimeout(() => {
    viewerRef.value?.updatePallet?.()
  }, 16)
}, { deep: true })

// 暴露方法
defineExpose({
  getParams: () => ({
    ...palletParams,
    sidefork: activeTab.value === 'two' ? 0 : 1,
    name: `${palletParams.boardLength}*${palletParams.beamLength}` 
  }),
  reset: () => {
    activeTab.value = 'two'
    Object.assign(palletParams, {
      customize: 0,
      boardLength: 100,
      beamLength: 100,
      panel_leg: 0,
      t_bottomlayer: 0,
      t_leglayout: 0,
      tf_boardwing: 0,
      f_structure: 'N',
      f_blockheight: 0,
      useCustomHeight: true 
    })
    nextTick(() => {
      viewerRef.value?.updatePallet?.()
    })
  },
  forceUpdate: () => {
    viewerRef.value?.updatePallet?.()
  },

  // 🔥 新增：获取完整配置的方法
  getFullConfig: () => {
    return {
      palletType: activeTab.value,
      productionType: palletParams.customize === 0 ? 'used' : 'custom',
      boardLength: palletParams.boardLength,
      beamLength: palletParams.beamLength,
      panelType: palletParams.panel_leg === 0 ? 'wooden' : 'plywood',
      bottomType: palletParams.t_bottomlayer === 0 ? 'none' : 'support',
      wingWidth: palletParams.tf_boardwing,
      beamLayout: palletParams.customize === 0 ? 'none' : 
                (palletParams.t_leglayout === 1 ? 'three' : 'four'),
      blockHeight: palletParams.f_blockheight,
      legStructure: `type${palletParams.f_structure}`,
      useCustomHeight: palletParams.useCustomHeight
    }
  }

})
</script>





 
<style scoped>
.pallet-simulator {
  display: flex;
  height: 60vh;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .pallet-simulator {
    flex-direction: column;
    height: auto;
    min-height: 60vh;
  }
}
</style>